<!DOCTYPE html>
<html>
  <head>
    <title>{% block title %}{% endblock %} - Flask Todo Demo</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/app.css') }}">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="mask-icon" href="/favicon.svg" color="#4A90E2">
    <meta name="viewport" content="width:device-width,initial-scale=1.0,user-scalable=no">
  </head>
  <body>
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-set" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="{{ url_for('index') }}">
            <img alt="LeanTodo" title="LeanTodo" src="{{ url_for('static', filename='leantodo.svg') }}">
          </a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse-set">
          <ul class="nav navbar-nav">
            {% set active = active|default('todos') -%}
            <li {% if active == 'todos' %}class="active"{% endif %}><a href="{{ url_for('todos.show') }}">Todo List</a></li>
            <li {% if active == 'help' %}class="active"{% endif %}><a href="{{ url_for('help') }}">说明</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            {% if g.user %}
              <li><a href="{{ url_for('users.logout') }}">登出</a></li>
            {% else %}
              <li><a href="{{ url_for('users.login') }}">登录</a></li>
              <li><a href="{{ url_for('users.register') }}">注册</a></li>
            {% endif %}
          </ul>
        </div>
      </div>
    </nav>
    <div class="container">
      {% block content %}
      {% endblock %}
      <footer class="page-footer">
        <hr>
        <p class="text-muted">Powered by <a href="https://leancloud.cn">LeanCloud</a> | Runs on <a href="https://leancloud.cn/docs/leanengine_overview.html">LeanEngine</a></p>
      </footer>
    </div>
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.slim.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script type="text/javascript">
    $.ready = function() {
      $('#todo-content').focus();

      let doneBtns = $('.glyphicon-unchecked');
      let undoBtns = $('.glyphicon-check');
      let deleteBtns = $('.glyphicon-trash')

      let toggleStatus = function (el) {
        el.classList.toggle('glyphicon-check');
        el.classList.toggle('glyphicon-unchecked');
      }
      let submitParentForm = function(el) {
        el.parentNode.submit()
      }

      for (let i = doneBtns.length - 1; i >= 0; i--) {
        doneBtns[i].onclick = function() {
          toggleStatus(this);
          submitParentForm(this);
        }
      }

      for (let i = undoBtns.length - 1; i >= 0; i--) {
        undoBtns[i].onclick = function() {
          toggleStatus(this);
          submitParentForm(this);
        }
      }

      for (let i = deleteBtns.length - 1; i >= 0; i--) {
        deleteBtns[i].onclick = function() {
          submitParentForm(this);
        }
      }
    }
    </script>
  </body>
</html>